<template>
  <div class="container">
    <el-header>
      新闻管理
    </el-header>
    <el-main>
      <el-select v-model="newsType" placeholder="请选择" @change="newsTypeChange">
        <el-option
          v-for="item in newsTypeOption"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-table
      :data="newsData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id"
        width="120">
      </el-table-column>
      <el-table-column
        prop="pubDate"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="pubTime"
        label="时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="500">
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="count"
      @current-change="currentChange">
    </el-pagination>
    <el-dialog
      title="警告"
      :visible.sync="dialogVisible"
      width="30%">
      <span>确定要删除id为{{id}}这条新闻么?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDeleteTheNews">确 定</el-button>
      </span>
    </el-dialog>
    </el-main>
    <el-footer>
    
    </el-footer>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      newsTypeOption: [{
        value: 1,
        label: '佰钧成新闻'
      }, {
        value: 2,
        label: '行业视点'
      }, {
        value: 3,
        label: '新闻速递'
      }],
      count: null,
      pageNo: 1,
      pageSize: 20,
      newsType: 1,
      newsData: [],
      dialogVisible: false,
      id: NaN
    }
  },
  methods: {
    newsTypeChange (index) {
      this.pageNo = 1
      this.newsType = index
      const { pageNo, pageSize, newsType } = this
      this._getNewsByType(pageNo, pageSize, newsType)
    },
    handleDetail (newsId) {
      this.$router.push({
        path: '/newsManageDetail',
        query: { newsId }
      })
      // console.log(id)
    },
    currentChange (index) {
      this.pageNo = index
      const { pageNo, pageSize, newsType } = this
      this._getNewsByType(pageNo, pageSize, newsType)
    },
    _getNewsByType (pageNo, pageSize, type) {
      axios.get('/api/getNewsByType', { params: {
        pageNo,
        pageSize,
        type
      }}).then(res => {
        let newsData = res.data.data.data.map(item => ({pubTime: new Date(item.date - 0).format('hh:mm:ss'), pubDate: new Date(item.date - 0).format('yyyy-MM-dd'), title: item.title, id: item.id}))
        let count = res.data.data.count
        this.count = count
        this.newsData = newsData
      })
    },
    handleDelete (id) {
      this.id = id
      this.dialogVisible = true
    },
    confirmDeleteTheNews () {
      const { pageNo, pageSize, newsType, id } = this
      this.dialogVisible = false
      axios.get('/api/delNewsById', { params: {
        id
      }}).then(res => {
        console.log(res)
        this._getNewsByType(pageNo, pageSize, newsType)
      })
    }
  },
  mounted () {
    const {pageNo, pageSize, newsType} = this
    this._getNewsByType(pageNo, pageSize, newsType)
  },
  components: {

  }
}
</script>

<style scoped>

</style>
